'use client'
import React, { useState } from 'react'
import MyInput from '@/app/component/my-input'
import { Info } from 'lucide-react'

const page = () => {
  const [value1, setValue1] = useState<string | undefined>()
  const [value2, setValue2] = useState<string | undefined>()
  const [value3, setValue3] = useState<number | undefined>()

  return (
    <div className='max-w-[800px] mx-auto'>
      <h2 className='text-[20px] font-bold'>placeholder</h2>
      <ul className='flex flex-col gap-4'>
        <li>
          <MyInput value={value1} onChange={setValue1} placeholder='请输入' className="w-[200px]" />
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>disabled</h2>
      <ul className='flex flex-col gap-4'>
        <li>
          <MyInput value={value2} onChange={setValue2} disabled placeholder='请输入' className="w-[200px]" />
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>prefix</h2>
      <ul className='flex flex-col gap-4'>
        <li>
          <MyInput value={value2} onChange={setValue2} prefix={<Info className='w-4 h-4' />} placeholder='请输入' className="w-[200px]" />
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>suffix</h2>
      <ul className='flex flex-col gap-4'>
        <li>
          <MyInput value={value2} onChange={setValue2} suffix={<span>.com</span>} placeholder='请输入' className="w-[200px]" />
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>number</h2>
      <ul className='flex gap-4'>
        <li>
            {JSON.stringify(value3)}
          <ul className='flex flex-col gap-4'>
            <li>
              <MyInput value={value3} onChange={setValue3} number placeholder='请输入' className="w-[200px]" />
            </li>
          </ul>
        </li>
        <li>
            {JSON.stringify(value1)}
          <ul className='flex flex-col gap-4'>
            <li>
              <MyInput value={value1} onChange={setValue1} placeholder='请输入' className="w-[200px]" />
            </li>
          </ul>
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>最大值、最小值</h2>
      <ul className='flex gap-4'>
        <li>
            {JSON.stringify(value3)}
          <ul className='flex flex-col gap-4'>
            <li>
              <MyInput value={value3} onChange={setValue3} number placeholder='请输入' className="w-[200px]" max={100} min={0} />
            </li>
          </ul>
        </li>
        <li>
            {JSON.stringify(value1)}
          <ul className='flex flex-col gap-4'>
            <li>
              <MyInput value={value1} onChange={setValue1} placeholder='请输入' className="w-[200px]" max={10} min={0} />
            </li>
          </ul>
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>precision 保留小数位数（number才会生效）</h2>
      <ul className='flex gap-4'>
        <li>
            {JSON.stringify(value3)}
          <ul className='flex flex-col gap-4'>
            <li>
              <MyInput value={value3} onChange={setValue3} number placeholder='请输入' className="w-[200px]" max={100} min={0} precision={2} />
            </li>
          </ul>
        </li>
        <li>
            {JSON.stringify(value1)}
          <ul className='flex flex-col gap-4'>
            <li>
              <MyInput value={value1} onChange={setValue1} placeholder='请输入' className="w-[200px]" max={10} min={0} />
            </li>
          </ul>
        </li>
      </ul>
      <br />
      <br />
      <hr />
    </div>
  )
}

export default page